<template>
  <div style="padding-top: 20px;">
    <vm-slider :autoplay="3000" loop autoplay="3000" style="height: 200px">
      <vm-slider-item>
        <img src="http://www.3987.com/uploadfile/2016/0418/20160418031310369.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://www.ylmfu.com/zhuti/UploadPic/2017-2/201722819541986395.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://gb.cri.cn/mmsource/images/2014/01/02/96/5479834386156741828.jpg">
      </vm-slider-item>
    </vm-slider>

    <vm-slider :autoplay="3000" loop direction="vertical" style="height: 200px; margin-top: 20px">
      <vm-slider-item>
        <img src="http://www.3987.com/uploadfile/2016/0418/20160418031310369.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://www.ylmfu.com/zhuti/UploadPic/2017-2/201722819541986395.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://gb.cri.cn/mmsource/images/2014/01/02/96/5479834386156741828.jpg">
      </vm-slider-item>
    </vm-slider>

    <vm-slider :autoplay="3000" @change="changeIndex1" style="height: 200px; margin-top: 20px">
      <vm-slider-item>
        <img src="http://www.3987.com/uploadfile/2016/0418/20160418031310369.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://www.ylmfu.com/zhuti/UploadPic/2017-2/201722819541986395.jpg">
      </vm-slider-item>
      <vm-slider-item>
        <img src="http://gb.cri.cn/mmsource/images/2014/01/02/96/5479834386156741828.jpg">
      </vm-slider-item>
    </vm-slider>
  </div>
</template>

<script>
  import '@/vmui/slider'
  export default {
    data () {
      return {
      }
    },
    methods: {
      changeIndex1 (nowIndex) {
        console.log('no-loop:', nowIndex)
      }
    }
  }
</script>
